<template>
  <div class="index">
    <!-- 顶部导航栏 -->
    <my-nav></my-nav>
    <!-- 顶部分类 -->
    <my-category
      :category="category"
      :currentName="currentName"
      @currentNameChange="currentNameChange"
    ></my-category>
    <transition name="show">
      <my-home-top
        v-if="show"
        :category="category"
        @currentNameChange="currentNameChange"
        :currentName="currentName"
      ></my-home-top>
    </transition>
    <!-- 内容 -->
    <router-view></router-view>
    <!-- 底部服务 -->
    <my-footer></my-footer>
    <!-- transition是Vue独有的动画组件 -->
    <transition name="move">
      <!-- 这个是点击回顶 -->
      <div class="top" v-show="show" @click="scrollToTop">
        <!-- 这里使用了阿里的字体图标 -->
        <i class="iconfont icon-fanhuidingbu"></i>
      </div>
    </transition>
  </div>
</template>
<script>
/* 引入顶部导航栏 */
import myNav from "@/components/privately/Home/myNav";
/* 顶部分类 */
import myCategory from "@/components/privately/Home/myCategory";
/* 页脚 */
import myFooter from "@/components/privately/Home/myFooter";
/* 顶部动态显示分类 */
import myHomeTop from "@/components/privately/Home/myHomeTop";
import { getCateGory } from "@/api/home/cate";
import {
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  onBeforeUnmount,
  watch,
  
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {},
  name: "index",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      show: false,
      scrollTop: 0,
      category: [],
      currentName: "",
      /* window滚动监听事件 */
      scrollChange: () => {
        data.scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        if (data.scrollTop >= 178) {
          data.show = true;
        } else {
          data.show = false;
        }
      },
      /* 点击回顶部 */
      scrollToTop: () => {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      },
      currentNameChange: (name) => {
        data.currentName = name;
      },
    });
    getCateGory().then((res) => {
      data.category = res.result;
    });
    /* 这是刷新回顶部 */
    window.onbeforeunload = function () {
      data.show = false;
      document.documentElement.scrollTop = 0; //ie下
      document.body.scrollTop = 0; //非ie
    };
    onMounted(() => {
      /* 在组件挂载完成之后给window添加一个滚动监听事件 */
      window.addEventListener("scroll", data.scrollChange);
    });
    onBeforeUnmount(() => {
      /* 在组件销毁的时候销毁window的上监听事件 */
      window.removeEventListener("scroll", data.scrollChange);
    });
    watch(
      () => route.params.id,
      (n, o) => {
        window.scrollTo({
          top: 0,
          behavior: "auto",
        });
      }
    );
    return { ...toRefs(data) };
  },
  components: {
    myNav,
    myCategory,
    myFooter,
    myHomeTop,
  },
};
</script>
<style lang="scss" scoped>
.index {
  width: 100%;
  /* 这个是回顶部的css样式 */
  .top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.5s;
    i {
      font-size: 30px;
    }
    background-color: #333;
    color: #fff;
  }
}
/* 动画从哪来到哪去 */
.move-enter-from,
.move-leave-to {
  transform: translateX(200%) !important;
}
/* 中间过渡 */
.move-enter-active,
.move-leave-active {
  transform: translateX(0);
}
/* 动画从哪来到哪去 */
.show-enter-from,
.show-leave-to {
  transform: translateY(-200%) !important;
}
/* 中间过渡 */
.show-enter-active,
.show-leave-active {
  transform: translateY(0);
}
/* 如果不想样式污染  就加个scoped */
// .show-enter-active,
// .show-leave-active {
//   transition: all 0.5s linear;
// }
/* 定义进入过渡生效时的状态 */
// .show-enter-active,
// .show-leave-active {
//   position: sticky;
//   top: 0 !important;
// }
// /* 定义进入过渡的结束状态 */
// .show-enter-to,
// .show-leave-to {
//   position: relative;
//   top: -100% !important;
// }
/* 定义离开过渡的开始状态 */

/* 定义离开过渡的结束状态 */
</style>